import { defineComponent, onUnmounted, reactive } from 'vue'
import Draw from './draw'

export default defineComponent({
  components: {
    Draw,
  },
  setup() {
    let intervalInstance = null
    const cdata = reactive({
      xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
      yData1: [-12, -13, -14, -15, -16, -17, -12, -23, -15, -15, -16, -17, -12, -13, -11],//女生
      yData2: [12, 13, 14, 15, 16, 17, 12, 13, 14, 15, 16, 17, 22, 13, 14],//男生
      barBorderRadius: [8, 8, 16, 16],
      barWidth: 8,
      legendName: ['男生', '女生'],//1
      fontSize: 16,
      left: '8%',
      index:0
    })
    intervalInstance = setInterval(() => {
      cdata.index += 1
    }, 2000)

    onUnmounted(() => {
      clearInterval(intervalInstance)
    })
    return () => {
      return (
        <div>
          <Draw cdata={cdata} />
        </div>
      )
    }
  },
})
